import { defineComponent, computed, ref, onMounted, toRefs, watch,unref } from 'vue';
import Toolbar from '@/components/design/components/Toolbar';
import Palette from '@/components/design/components/Palette';
import Designer from '@/components/design/components/Designer';
import Panel from '@/components/design/components/Panel';
import ContextMenu from '@/components/design/components/ContextMenu/index.vue';
import { EditorSettings } from 'types/editor/settings';
import { defaultSettings } from '@/components/design/config';

import hljs from 'highlight.js/lib/core';
import xml from 'highlight.js/lib/languages/xml';
import json from 'highlight.js/lib/languages/json';
import { NConfigProvider, NDialogProvider, NMessageProvider } from 'naive-ui';

hljs.registerLanguage('xml', xml);
hljs.registerLanguage('json', json);

const App = defineComponent({
  props: {
    xml: {
      type: String as PropType<string>,
      default: undefined,
    },
    taskList:{
      type: String as PropType<any>,
      default: undefined,
    },
    connectionList:{
      type: String as PropType<any>,
      default: undefined,
    },
  },
  setup(props, { emit }) {
    const processXml = ref<string | undefined>(undefined);
    const tasksInfo = ref<any | undefined>(undefined);
    const connectionsInfo= ref<any | undefined>(undefined);
    watch(
      () => props.xml,
      (newVal) => {
        if (newVal) {
          processXml.value = newVal;
        }
      },
      {
        immediate: true,
      },
    );
    watch(
      () => props.taskList,
      (newVal) => {
        if (newVal) {
          tasksInfo.value = newVal;
        }
      },
      {
        immediate: true,
      },
    );
    watch(
      () => props.connectionList,
      (newVal) => {
        if (newVal) {
          connectionsInfo.value = newVal;
        }
      },
      {
        immediate: true,
      },
    );

    const editorSettings = ref<EditorSettings>({ ...defaultSettings });

    const customPalette = computed<boolean>(() => editorSettings.value.paletteMode === 'custom');
    const customPenal = computed<boolean>(() => editorSettings.value.penalMode === 'custom');
    const showToolbar = computed<boolean>(() => editorSettings.value.toolbar);

    const computedClasses = computed<string>(() => {
      const baseClass = ['designer-container'];
      customPalette.value && baseClass.push('designer-with-palette');
      customPenal.value && baseClass.push('designer-with-penal');
      editorSettings.value.bg === 'grid-image' && baseClass.push('designer-with-bg');
      editorSettings.value.bg === 'image' && baseClass.push('designer-with-image');
      return baseClass.join(' ');
    });

    onMounted(() => {
      document.body.addEventListener('contextmenu', function (ev) {
        ev.preventDefault();
      });
    });

    /* 组件渲染 */ // v-model={[tasksInfo.value,'taskList',connectionsInfo.value,'connectionList']}  v-model={[tasksInfo.value,'taskList']}
    return () => (
      <NConfigProvider
        abstract
        componentOptions={{ DynamicInput: { buttonSize: 'small' } }}
        hljs={hljs}
      >
        <NDialogProvider>
          <div class={computedClasses.value} id="designer-container">
            <NMessageProvider>
              {showToolbar.value && <Toolbar></Toolbar>}
              <div class="main-content">
                {/* <Palette></Palette> */}
                <Designer v-model={[processXml.value, 'xml']}></Designer>
                {customPenal.value ? (
                  <Panel   v-model={[connectionsInfo.value,'connectionList']} v-model={[tasksInfo.value,'taskList']} ></Panel>
                ) : (
                  <div class="camunda-penal" id="camunda-penal"></div>
                )}
              </div>
              <ContextMenu></ContextMenu>
            </NMessageProvider>
          </div>
        </NDialogProvider>
      </NConfigProvider>
    );
  },
});

export default App;
